<template>
  <div id="Login">
    <!-- 登陆注册页面 -->
    <div class="login-main">
      <el-form ref="formRef" :model="form" :rules="rules" style="width: 60%">
        <h3 class="title">欢迎来到让风吹去阴影聊天室</h3>
        <!-- 用户名输入框 -->
        <el-form-item prop="username">
          <el-input v-model="form.username" :prefix-icon="User" size="large" placeholder="请输入用户名" maxlength="11" />
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <el-input v-model="form.password" :prefix-icon="Lock" size="large" show-password placeholder="请输入密码" maxlength="16" />
        </el-form-item>
        <!-- 验证码输入框 -->
        <el-form-item prop="validCode" style="width: 100%" v-if="isHidden">
          <div class="validCodeBox">
            <el-input v-model="form.validCode" size="large" placeholder="请输入验证码" maxlength="4" />
            <div class="code">
              <!-- 验证码组件-->
              <ValidCode />
            </div>
          </div>
        </el-form-item>
        <!-- 切换到登录/注册页面,忘记密码 -->
        <div class="bottomText">
          <p class="toLoginText">{{ regText }}账号？去 <b @click="goToRegister">{{ registerText }}</b></p>
          <p class="toLoginText">忘记密码？去 <b @click="goToForgotPassword">找回密码</b></p>
        </div>
        <!-- 登陆/注册按钮 -->
        <el-form-item style="width: 100%">
          <el-button type="primary" size="large" @click="submitForm">{{ btnText }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
// 引入需要使用的icon组件
import { User, Lock } from '@element-plus/icons-vue';
// 引入路由
import router from '@/router/index.js';
// 引入验证码组件
import ValidCode from '@/components/ValidCode/ValidCode.vue';
// 引入注册接口
import { register } from '@/api/http.js'


const registerText = ref('注册');
const regText = ref('没有');
const btnText = ref('登录');
const isHidden = ref(true);

// 表单数据
const form = reactive({
  username: '',
  password: '',
  validCode: ''
});

// 登陆/注册页面的切换
const goToRegister = () => {
  if (registerText.value === '注册') {
    registerText.value = '登录';
    regText.value = '有';
    btnText.value = '注册';
    isHidden.value = false;
  } else {
    registerText.value = '注册';
    regText.value = '没有';
    btnText.value = '登录';
    isHidden.value = true;
  }
};

// 表单验证规则(用户名不允许超过11位,密码不允许超过16位,验证码不允许超过4位)
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { max: 11, message: '用户名长度不能超过11个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { max: 16, message: '密码长度不能超过16个字符', trigger: 'blur' }
  ],
  validCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { max: 4, message: '验证码长度为4位', trigger: 'blur' }
  ]
});

// 表单引用
const formRef = ref(null);

// 提交表单方法
const submitForm =  () => {
  // 表单验证，暂时设置为验证码正确，账号密码不为空就可以
  // 如果点的是注册按钮，就注册逻辑

};

// 跳转到找回密码页面
function goToForgotPassword() {
  console.log('Go to Forgot Password page');
  router.push('/forgetPassword');
}
</script>

<style lang="less" scoped>
// 引入样式
@import 'MimLogin.less';
</style>
